<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/public.css">
		<!-- 引入组件库 -->
		<script src="js/vue.v2.6.14.js .js"></script>
		<script src="js/index.js"></script>
		<script src="js/axios.v0.21.1.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 面包屑 -->
			<el-row>
			  <el-col :span="24">
				  <el-breadcrumb separator="/">
				    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				    <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
				    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
				  </el-breadcrumb>
			  </el-col>
			</el-row>
			<el-divider></el-divider>
			<el-row>
			  <el-col :span="20">
				  <el-form :inline="true" class="demo-form-inline">
				    <el-form-item label="用户名">
				      <el-input v-model="search.name" size="small" placeholder="用户名"></el-input>
				    </el-form-item>
				    <el-form-item label="邮箱">
				      <el-input v-model="search.email" size="small" placeholder="邮箱"></el-input>
				    </el-form-item>
				    <el-form-item>
				      <el-button size="small" type="primary" @click="doSearch"><i class="el-icon-search"></i> 查询</el-button>
				    </el-form-item>
				  </el-form>
			  </el-col>
			  <el-col :span="4" class="text-right" >
				  <el-button @click="tosave" type="primary" size="small"><i class="el-icon-edit"></i> 添加用户</el-button>
			  </el-col>
			</el-row>
			<el-row>
			  <el-col :span="24">
				  <el-table size="small" :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="tableData" style="width: 100%">
				  	<el-table-column prop="user.id" label="id" width="70" ></el-table-column>
				  	<el-table-column
				  	      label="头像"
				  	      width="50">
				  	      <template slot-scope="scope">
				  	        <img  v-if="scope.row.user.logo" :src='scope.row.user.logo' class="listLogo" />
							<i v-else class="el-icon-user-solid"></i>
				  	      </template>
				  	    </el-table-column>
					<el-table-column prop="user.name" label="用户名" ></el-table-column>
					<el-table-column prop="user.truename" label="真实姓名" ></el-table-column>
					<el-table-column prop="user.email" label="Email" ></el-table-column>
					<el-table-column
					      label="注册时间"
					      width="180">
					      <template slot-scope="scope">
					        <i class="el-icon-time"></i>
					        <span style="margin-left: 10px">{{ scope.row.user.addtime }}</span>
					      </template>
					    </el-table-column>
					<el-table-column prop="role.rolename" label="用户角色" ></el-table-column>
					<el-table-column label="管理菜单"  width="130" align="center">
						<template slot-scope="scope">
<!--							<el-button type="primary" round size="mini" @click="handleUpdate(scope.row.user.id)"><i class="el-icon-edit"></i></el-button>-->
							<el-button type="primary" round size="mini" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
							<el-button size="mini" round type="danger" @click="handleDelete(scope.row.user.id)"><i class="el-icon-delete"></i></el-button>
						</template>
					</el-table-column>
				  </el-table>
			  </el-col>
			</el-row>

			<el-row>
				<el-col :span="24" class="text-right margin-top">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageInfo.pageNum"
							:page-sizes="[5,10,20,50]"
							:page-size="pageInfo.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="pageInfo.total">
					</el-pagination>
				</el-col>
			</el-row>

			<!-- 	修改 -->
			<el-dialog title="修改用户" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">

				<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="用户名" prop="user.name">
						<el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="user.password">
						<el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="user.email">
						<el-input v-model="ruleForm.email" style="width: 210px;"></el-input>
					</el-form-item>
					<el-form-item label="注册时间" prop="user.addtime">
						<el-input v-model="ruleForm.addtime" style="width: 210px;"></el-input>
					</el-form-item>
					<el-form-item label="角色" prop="user.type">
						<el-select v-model="ruleForm.type" placeholder="请选择角色">
							<el-option label="管理员" :value="1"></el-option>
							<el-option label="普通用户" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="真实姓名" prop="user.truename">
						<el-input v-model="ruleForm.truename" style="width: 210px;"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
			</el-dialog>

		</div>
	</body>
	<script>
		// 创建根实例
		new Vue({
			el: '#app',
			data: {
				search:{
					name:'',
					email:''
				},
				pageInfo: {
					pageNum:1,
					pageSize:5,
					total:0,
				},
				tableData:[],
				//修改对话框
				dialogVisible:false,
				//修改表单
				ruleForm: {
					id: '',
					name: '',
					password: '',
					email: '',
					addtime: '',
					type: '',
					truename: '',
					logo:''
				},
			},
			created() {
				this.loadList();
			},
			methods: {
				loadList() {
					axios.post(`/user/${this.pageInfo.pageNum}/${this.pageInfo.pageSize}`,this.search).then(response=>{
						this.pageInfo = response.data;
						this.tableData = this.pageInfo.list;
					})
				},
				doSearch() {
					this.loadList();
				},
				/* 修改回显用户信息 */
				handleEdit(row) {
					let r = {...row};//将row的属性给r，而不是引用
					this.ruleForm = r.user;
					// alert(this.ruleForm);
					this.dialogVisible = true;
				},

				handleSizeChange(val) {
					this.pageInfo.pageSize = val;
					this.loadList();
				},
				handleCurrentChange(val) {
					this.pageInfo.pageNum = val;
					this.loadList();
				},
				  // handleUpdate(id){},
				submitForm(formName) {
					axios.put(`/user`,this.ruleForm).then(resp=>{
						if(resp.data){
							this.$message.success("修改成功");
						}else{
							this.$message.error("修改失败");
						}
						setTimeout(()=>{
							location.href = 'list-user.html';
						},1000);
					});
				},
				  handleDelete(id){
					  this.$confirm('你确定要删除该用户吗, 是否继续?', '提示', {
					            confirmButtonText: '确定',
					            cancelButtonText: '取消',
					            type: 'warning'
					          }).then(() => {
								  axios.delete(`/user/${id}`).then(response=>{
									  if (response.data){
										  this.$message({
											  type: 'success',
											  message: '删除成功!'
										  });
										  this.loadList();
									  }else {
										  this.$message.error("删除失败");
									  }

								  });

					          }).catch(() => {
					            this.$message({
					              type: 'info',
					              message: '已取消删除'
					            });          
					          });
				  },
				  tosave(){
					  location.href="save-user.html";
				  }
			}
		})
	</script>
</html>
